import {View} from "@tarojs/components";
import React, {useCallback, useEffect, useRef, useState} from "react";
import {Cell, CellGroup, Field, Radio, RadioGroup} from "@antmjs/vantui";
import BottomButton from "@/components/bottom_button";
import Utils from "@/utils/common";
import {OptionModel, RelationModel} from "@/common/apis/model";
import {relationUpdateApi} from "@/common/apis/home_datasource";
import NumberUtils from "@/utils/number_utils";
import Taro from "@tarojs/taro";

definePageConfig({
  navigationBarTitleText: '设置成员权限'
})

export default function Set_member_permission() {


  //设置查看权限
  const [look, setLook] = useState<string>("0")

  //设置使用金额权限
  const [useMoney, setUseMoney] = useState<string>("0")
  //审批权限
  const [approval, setApproval] = useState<string>("0")
  const relationModel = useRef<RelationModel>();

  const radioChange = useCallback((e, type) => {
    if (type === "0") {
      setLook(e.detail)
    } else if (type === "1") {
      setUseMoney(e.detail)
    } else {
      setApproval(e.detail)
    }
  }, []);

  const lookText = useRef<OptionModel[]>([
    {text: '否', value: '0', label: '否'},
    {text: '是', value: '1', label: '是'}
  ]);

  const useMoneyText = useRef<OptionModel[]>([
    {text: '禁止使用', value: '0', label: '禁止使用'},
    {text: '使用团队全部金额', value: '2', label: '使用团队全部金额'},
    {text: '使用固定金额', value: '1', label: '使用固定金额'}
  ]);

  const approvalText = useRef<OptionModel[]>([
    {text: '否', value: '0', label: '否'},
    {text: '是', value: '1', label: '是'}
  ]);
  const submit = useCallback(() => {
    relationUpdateApi({
      viewPower: look,
      teamId: relationModel.current.teamId,
      id: relationModel.current.id,
      amountPower: useMoney,
      approve: approval,
      debtLimit: useMoney === '1' ? amount.current : '0'
    }).then(res => {
      if (res) {
        if (eventChannel.current) {
          Utils.emit(eventChannel.current, 'update', true)
        }
        Utils.showOkToast('设置成功')
        Utils.navigateBack()
      }
    })
  }, [approval, look, useMoney]);

  const amount = useRef<String>()
  const inputChange = useCallback((e) => {
    //修改值
    amount.current = e;
  }, []);

  const eventChannel = useRef<Taro.EventChannel | null>();

  useEffect(() => {
    const i = Utils.getI()
    eventChannel.current = Utils.getChannel(i);
    //获取参数
    const params = Utils.getParamsByRouter(Utils.getI())
    if (params && params.data) {
      relationModel.current = Utils.getObjectWithUrl<RelationModel>(params.data)
      if (relationModel.current) {
        const num = NumberUtils.stringToNumber(relationModel.current.amount)
        amount.current = (num > 0 ? `${num}` : '')
        setLook(`${relationModel.current.viewPower}`)
        setUseMoney(`${relationModel.current.amountPower}`)
        setApproval(`${relationModel.current.approve}`)
      }
    }
  }, []);

  return (
    <View>
      <CellGroup title='查看所有检测项目'>
        <Cell renderTitle={<View style={{marginLeft: '20px'}}>
          <RadioGroup
            value={look}
            onChange={(e) => radioChange(e, "0")}
            direction='horizontal'
            style={{display: 'flex', flexWrap: 'wrap', gap: '10px'}}
          >   {lookText.current.map((option, i) => (
            <Radio
              key={option.value}
              name={option.value}
              shape='square'
            >
              {option.label}
            </Radio>
          ))}
          </RadioGroup></View>}
        />
      </CellGroup>
      <CellGroup title='使用金额'>
        <Cell renderTitle={<View style={{marginLeft: '20px'}}>
          <RadioGroup
            value={useMoney}
            onChange={(e) => radioChange(e, "1")}
            direction='horizontal'
            style={{display: 'flex', flexWrap: 'wrap', gap: '10px'}}
          >   {useMoneyText.current.map((option, i) => (
            <Radio
              key={option.value}
              name={option.value}
              shape='square'
            >
              {option.label}
            </Radio>
          ))}
          </RadioGroup></View>}
        />
        {
          useMoney === '1' ? <Cell renderTitle={<Field
            required
            clearable
            value={amount.current}
            type='digit'
            onInput={(e) => inputChange(e.detail)}
            label='使用金额'
            placeholder='请输入使用金额'
          />}
          /> : null
        }
      </CellGroup>
      <CellGroup title='审批权限'>
        <Cell renderTitle={<View style={{marginLeft: '20px'}}>
          <RadioGroup
            value={approval}
            onChange={(e) => radioChange(e, "2")}
            direction='horizontal'
            style={{display: 'flex', flexWrap: 'wrap', gap: '10px'}}
          >   {approvalText.current.map((option, i) => (
            <Radio
              key={option.value}
              name={option.value}
              shape='square'
            >
              {option.label}
            </Radio>
          ))}
          </RadioGroup></View>}
        />
      </CellGroup>
      <BottomButton onSubmit={() => {
        submit();
      }} submitText='设置'
      />
    </View>
  )
}
